<template>
    <div>
        <canvas id="three"></canvas>
    </div>
</template>

<script>
    import * as THREE from "three";
    import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
    import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

    export default {
        mounted() {
            this.initThree();
        },
        methods: {
            initThree() {
                const scene = new THREE.Scene();
                scene.background = new THREE.Color("#eee");
                scene.fog = new THREE.Fog("#eee", 20, 100);

                const canvas = document.querySelector("#three");
                const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
                renderer.shadowMap.enabled = true;

                const camera = new THREE.PerspectiveCamera(
                    50,
                    window.innerWidth / window.innerHeight,
                    0.1,
                    1000
                );
                camera.position.z = 10;

                const gltfLoader = new GLTFLoader();
                gltfLoader.load("/model/dwendwen.gltf", (gltf) => {
                    let model = gltf.scene;
                    model.traverse((child) => {
                        let explosionTexture = new THREE.TextureLoader().load("/model/env.jpg");
                        if (child.name == "outer" || child.name == "mask") {
                            child.material.envMap = explosionTexture;
                            child.material.envMap.mapping =
                            THREE.EquirectangularReflectionMapping;
                            child.material.envMapIntensity = 2;
                        } else if (child.name == "body") {
                            const map = child.material.map;
                            child.material = new THREE.MeshToonMaterial({ map: map });
                        }
                    });
                    scene.add(model);
                });

                const hemLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6);
                hemLight.position.set(0, 48, 0);
                scene.add(hemLight);

                const dirLight = new THREE.DirectionalLight(0xffffff, 0.6);
                dirLight.position.set(-10, 8, -5);
                dirLight.castShadow = true;
                dirLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
                scene.add(dirLight);

                let floorGeometry = new THREE.PlaneGeometry(8000, 8000);
                let floorMaterial = new THREE.MeshPhongMaterial({
                    color: 0x857ebb,
                    shininess: 0,
                });

                let floor = new THREE.Mesh(floorGeometry, floorMaterial);
                floor.rotation.x = -0.5 * Math.PI;
                floor.receiveShadow = true;
                floor.position.y = -0.001;

                const controls = new OrbitControls(camera, renderer.domElement);
                controls.enableDamping = true;

                function animate() {
                    controls.update();
                    renderer.render(scene, camera);
                    requestAnimationFrame(animate);

                    if (resizeRendererToDisplaySize(renderer)) {
                        const canvas = renderer.domElement;
                        camera.aspect = canvas.clientWidth / canvas.clientHeight;
                        camera.updateProjectionMatrix();
                    }
                }
                animate();

                function resizeRendererToDisplaySize(renderer) {
                    const canvas = renderer.domElement;
                    var width = window.innerWidth;
                    var height = window.innerHeight;
                    var canvasPixelWidth = canvas.width / window.devicePixelRatio;
                    var canvasPixelHeight = canvas.height / window.devicePixelRatio;

                    const needResize =
                    canvasPixelWidth !== width || canvasPixelHeight !== height;
                    if (needResize) {
                        renderer.setSize(width, height, false);
                    }
                    return needResize;
                }
            },
        },
    };
</script>

<style>
    #three {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
    }
</style>